<template>
  <!-- 填报条件 -->
  <div class="task_container">
    <div class="task">
      <div class="baseInfo">
        <div class="title">
          组织信息：
          <span>{{ basicInformation.orgId }}</span>
        </div>

        <div class="title">
          核算标准：
          <span>{{ basicInformation.standardName }}</span>
        </div>
        <div class="title">
          核算行业：
          <span>{{ basicInformation.industryName }}</span>
        </div>
        <div class="title">
          核算周期：
          <span>
            {{ basicInformation.startTime }} -
            {{ basicInformation.endTime }}
          </span>
        </div>
      </div>
      <!-- 填报数据 -->
      <div style="width: 100%">
        <a-tabs>
          <a-tab-pane v-for="(item, index) in fillData" :key="item.boundaryId">
            <span slot="tab">
              <a-icon :type="item.boundaryIcon" />
              {{ item.boundaryName }}
            </span>
            <!-- k每个面板对象 v索引 -->
            <transition-group name="list" tag="ul" class="AccountingEntries">
              <li
                class="AccountingEntriesPanel"
                v-for="(accountingObj, accountingIdx) in item.data"
                :key="accountingObj.id"
              >
                <div class="AccountingEntriesPanel_box">
                  <div class="delete">
                    <a-popconfirm title="是否要删除该数据？" @confirm="removeFun(index, accountingIdx)">
                      <a-icon type="close" class="iconfont" />
                    </a-popconfirm>
                  </div>
                  <!-- 用户填写的数据 -->
                  <div class="row" v-for="(row, rowIdx) in accountingObj.dataList" :key="rowIdx">
                    <!-- <a-icon type="code-sandbox" style="color: #50baf3" /> -->
                    <div style="flex: 1; padding-right: 10px">
                      <div class="name">{{ row.showName || row.itemName || row.fieldName }}</div>
                      <a-select
                        v-myfocus
                        :placeholder="`请选择${row.itemName}`"
                        class="type"
                        v-if="row.type == 1"
                        @change="
                          handleChangetype(
                            $event,
                            row,
                            rowIdx,
                            index,
                            accountingIdx
                          )
                        "
                      >
                        <a-select-option
                          v-for="key in row.selectList"
                          :key="key.itemName"
                        >{{ key.itemName }}</a-select-option>
                      </a-select>
                      <!-- <a-input-number
            :precision="0.1"
            style="width: 100%"
            :min="0"
            :disabled="showable"
            placeholder="请输入"
                      v-model="row.defaultValue"/>-->

                      <a-input
                        :placeholder="`请输入${row.fieldName}`"
                        v-else
                        type="text"
                        :name="row.defaultValue"
                        id
                        v-myfocus
                        v-model="row.defaultValue"
                        onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"
                        @change="
                          (e) =>
                            inputHandleChange(
                              e.target.value,
                              rowIdx,
                              index,
                              accountingIdx
                            )
                        "
                      />
                    </div>
                    <div v-if="row.type == 1  || row.unit  == ''" class="unit"></div>
                    <a-select v-else class="unit" style :default-value="row.unit || '千克'">
                      <a-select-option
                        :value="unit"
                        v-for="(unit, idx) in row.unitList"
                        :key="idx"
                      >{{ unit }}</a-select-option>
                    </a-select>
                  </div>
                </div>
              </li>
              <li class="AccountingEntriesPanel" key="abc">
                <div
                  class="AccountingEntriesPanel_add bg_add"
                  @click="addAccountingFun(item, index)"
                >
                  <div class="cen_">
                    <a-icon class="iconfont_" type="plus" style />
                    <div style="text-align: center">新建核算项</div>
                  </div>
                </div>
              </li>
            </transition-group>
          </a-tab-pane>
        </a-tabs>

        <div class="footer">
          <div class="page">
            <!-- <a-pagination simple :default-current="2" :total="50" /> -->
          </div>

          <div class="btn_box">
            <div class="Preview" @click="Preview(true)">
              <div class="text">预览核算数据</div>
            </div>
            <div class="previous" @click="step(stepsCurrent - 1)">上一步</div>
            <div class="next" @click="step(2, stepsCurrent + 1)">下一步</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import bus from "@/bus";
import {
  getInitAddUnitByUnitId,
  accountingFill,
  accountingFillBaseInfo
} from "@/api/api";
import { Mixin } from "@/mixins/mixin.js";
export default {
  props: ["cycleId"],
  data() {
    return {
      //   basicInformation: null,
      memberLoading: false,
      form: this.$form.createForm(this),
      //   basicInformation: {
      //     orgId: '广目零碳项目研发部',
      //     basicInformation: '国家发改委企业温室气体排放核算方法与报告指南',
      //     industryName: '发电企业',
      //     startTime: '2022-10-01',
      //     endTime: '2022-10-01',
      //   },
      currentAccountingObj: null,
      mockData1: [
        {
          boundaryName: "燃料燃烧",
          boundaryId: new Date(),
          boundaryIconType: "code-sandbox",
          data: [
            // [
            //   {
            //     itemName: '燃料类型',
            //     key: 'item_name',
            //     defaultValue: '燃油',
            //     unit: null, //单位
            //     type: 1, //1为下拉框 2为输入框
            //   },
            //   {
            //     itemName: '净消耗量',
            //     key: 'net_consumption',
            //     defaultValue: '1',
            //     unit: '千克', //单位
            //     type: 2, //1为下拉框 2为输入框
            //     unitList: [],
            //   },
            //   {
            //     itemName: '低位发热量',
            //     key: 'low_calorific_value',
            //     defaultValue: '1',
            //     unit: '千克', //单位
            //     type: 2, //1为下拉框 2为输入框
            //     unitList: [],
            //   },
            //   {
            //     itemName: '单位热值含碳量',
            //     key: 'unit_calorific_value',
            //     defaultValue: '1',
            //     unit: '千克', //单位
            //     type: 2, //1为下拉框 2为输入框
            //     unitList: [],
            //   },
            // ],
          ],
          template: {
            itemName: "燃料类型",
            key: "item_name",
            defaultValue: "",
            unit: null, //单位
            type: 1, //1为下拉框 2为输入框
            selectList: [
              {
                key: new Date(),
                value: "燃油",
                defaultValueObj: [
                  {
                    itemName: "净消耗量",
                    key: "net_consumption",
                    defaultValue: "",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "低位发热量",
                    key: "low_calorific_value",
                    defaultValue: "3",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "单位热值含碳量",
                    key: "unit_calorific_value",
                    defaultValue: "1.2",
                    unit: "千克",
                    type: 2
                  }
                ]
              },
              {
                key: new Date(),
                value: "汽油",
                defaultValueObj: [
                  {
                    itemName: "净消耗量",
                    key: "net_consumption",
                    defaultValue: "",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "低位发热量",
                    key: "low_calorific_value",
                    defaultValue: "1",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "单位热值含碳量",
                    key: "unit_calorific_value",
                    defaultValue: "2",
                    unit: "千克",
                    type: 2
                  }
                ]
              },
              {
                key: new Date(),
                value: "石油",
                defaultValueObj: [
                  {
                    itemName: "净消耗量",
                    key: "net_consumption",
                    defaultValue: "",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "低位发热量",
                    key: "low_calorific_value",
                    defaultValue: "7",
                    unit: "千克",
                    type: 2
                  },
                  {
                    itemName: "单位热值含碳量",
                    key: "unit_calorific_value",
                    defaultValue: "8",
                    unit: "千克",
                    type: 2
                  }
                ]
              }
            ]
          }
        },

        {
          boundaryName: "工业生产过程",
          boundaryId: new Date(),
          boundaryIconType: "code-sandbox",
          data: [],
          template: {
            itemName: "排放源类别",
            key: "item_name",
            defaultValue: "",
            unit: null, //单位
            type: 1, //1为下拉框 2为输入框
            selectList: [
              {
                itemName: "类型",
                key: new Date(),
                defaultValue: "",
                value: "碳酸盐",
                unit: null, //单位
                type: 1, //1为下拉框 2为输入框
                selectList: [
                  {
                    key: new Date(),
                    value: "石灰石",
                    defaultValueObj: [
                      {
                        itemName: "净消耗量",
                        key: "net_consumption",
                        defaultValue: "",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "低位发热量",
                        key: "low_calorific_value",
                        defaultValue: "33",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "单位热值含碳量",
                        key: "unit_calorific_value",
                        defaultValue: "0.031",
                        unit: "千克",
                        type: 2
                      }
                    ]
                  },
                  {
                    key: new Date(),
                    value: "白云石",
                    defaultValueObj: [
                      {
                        itemName: "净消耗量",
                        key: "net_consumption",
                        defaultValue: "",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "低位发热量",
                        key: "low_calorific_value",
                        defaultValue: "0",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "单位热值含碳量",
                        key: "unit_calorific_value",
                        defaultValue: "0.314",
                        unit: "千克",
                        type: 2
                      }
                    ]
                  }
                ]
              },
              {
                itemName: "类型",
                key: new Date(),
                value: "硝酸",
                defaultValue: "", //默认值
                unit: null, //单位
                type: 1, //1为下拉框 2为输入框
                selectList: [
                  {
                    key: new Date(),
                    value: "硝酸1",
                    defaultValueObj: [
                      {
                        itemName: "净消耗量",
                        key: "net_consumption",
                        defaultValue: "",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "低位发热量",
                        key: "low_calorific_value",
                        defaultValue: "33",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "单位热值含碳量",
                        key: "unit_calorific_value",
                        defaultValue: "0.031",
                        unit: "千克",
                        type: 2
                      }
                    ]
                  },
                  {
                    key: new Date(),
                    value: "硝酸2",
                    defaultValueObj: [
                      {
                        itemName: "净消耗量",
                        key: "net_consumption",
                        defaultValue: "",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "低位发热量",
                        key: "low_calorific_value",
                        defaultValue: "0",
                        unit: "千克",
                        type: 2
                      },
                      {
                        itemName: "单位热值含碳量",
                        key: "unit_calorific_value",
                        defaultValue: "0.314",
                        unit: "千克",
                        type: 2
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      ]
    };
  },
  mixins: [Mixin],
  methods: {
    step(step) {
      this.setStepsCurrent(step);
    },
    //   删除
    removeFun(index, accountingIdx) {
      this.fillData[index]["data"].splice(accountingIdx, 1);
    },
    //   添加核算项
    addAccountingFun(accountingItem, index) {
      //   console.log(accountingItem, index);
      var standardAssignmentObj = Object.assign(
        {
          boundaryName: accountingItem.boundaryName,
          boundaryId: accountingItem.boundaryId,
          level: accountingItem.level,
          hasLeaf: accountingItem.hasLeaf,
          parentId: accountingItem.parentId ? accountingItem.parentId : ""
        },
        { dataList: [] },
        { id: Number(new Date()) }
      );
      if (accountingItem["template"].type == 1) {
        //如果类型是下来框情况
        standardAssignmentObj.dataList = [accountingItem["template"]];
        accountingItem["data"].push(standardAssignmentObj);
      } else {
        //不是下拉框的情况
        const target = accountingItem["template"]["selectList"][0];
        var fieldListArr = [];
        target.fieldList.forEach(fieldListItem => {
          fieldListArr.push({
            ...fieldListItem
          });
        });
        standardAssignmentObj.dataList = fieldListArr;
        accountingItem["data"].push(standardAssignmentObj);
        //   console.log(standardAssignmentObj, accountingItem["template"]);
      }
    },
    // 修改属性值
    inputHandleChange(value, rowIdx, index, accountingIdx) {
      this.$set(
        this.fillData[index]["data"][accountingIdx]["dataList"][rowIdx],
        "defaultValue",
        value
      );
      this.$set(
        this.fillData[index]["data"][accountingIdx],
        "defaultValue",
        value
      );
    },
    // 下拉框修改
    handleChangetype($event, row, rowIdx, index, accountingIdx) {
      // index 边界的idx   accountingIdx 核算项的idx  rowIdx 每一行的idx
      this.fillData[index]["data"][accountingIdx].dataList.splice(rowIdx + 1); //操作的时候清除下一层
      if (
        this.fillData[index]["data"][accountingIdx]["dataList"][rowIdx]
          .selectList
      ) {
        var currentArr = this.fillData[index]["data"][accountingIdx][
          "dataList"
        ][rowIdx].selectList;
        const target = currentArr.find(item => {
          //   console.log(item, $event);
          return item.itemName === $event;
        });
        // //   console.log(target);
        if (target.type == 1) {
          // 判断是不是最底层 1为下拉框
          // this.fillData[index]["data"][accountingIdx].boundaryId = target.boundaryId
          setTimeout(() => {
            this.fillData[index]["data"][accountingIdx]["dataList"].push({
              ...target
            });
          }, 0);
        } else {
          // 最底层 直接给出默认值
          setTimeout(() => {
            // 用户数据里添加核算项
            this.fillData[index]["data"][accountingIdx]["typeId"] =
              target.itemId;
            this.fillData[index]["data"][accountingIdx]["itemName"] =
              target.itemName;
            this.fillData[index]["data"][accountingIdx]["defaultValue"] =
              target.fieldList[0].defaultValue;
            // this.fillData[index]['data'][accountingIdx]['id']= item.itemId
            target.fieldList.forEach(item => {
              this.fillData[index]["data"][accountingIdx]["dataList"].push({
                ...item
              });
            });
            this.fillData[index]["data"][accountingIdx]["dataList"];
            //   console.log(
            //   this.fillData[index]["data"][accountingIdx]["dataList"]
            // );
          }, 0);
        }
        // //   console.log( this.fillData[index],'------',this.fillData[index]["data"],'------',this.fillData[index]["data"],'------',this.fillData[index]["data"][accountingIdx])
      }
    },
    Preview(bool) {
      bus.$emit("showPreviewFun", bool);
    }
  }
};
</script>

<style lang="scss">
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(60px);
}
.task_container {
  margin: auto;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  .AccountingEntries {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 20px 20px;
    list-style: none;
    .addAccounting {
      width: 100%;
      border-top: 1px solid #f1f1f1;
      padding: 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .AccountingEntriesPanel {
      width: 33%;

      min-height: 140px;
      padding: 5px;
      transition: 0.2s;
      .bg_add:hover {
        background: rgba(235, 235, 235, 0.5);
        transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .cen_ {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        //    align-content:center;
        justify-content: center;
      }
      .AccountingEntriesPanel_add {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        cursor: pointer;
        height: 100%;
        border: 1px solid #ebebeb;
        color: #262a2f;
        font-size: 16px;
        padding: 10px 30px 20px;
        border-radius: 10px;
        box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
        transition: 0.2s;
        &:hover .iconfont_ {
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transform: rotate(90deg);
        }
        .iconfont_ {
          transform: rotate(0deg);
          transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          color: #50baf3;
          font-size: 46px;
          font-weight: 600;
          margin-right: 6px;
        }
      }
      .AccountingEntriesPanel_box {
        position: relative;
        cursor: pointer;
        height: 100%;
        border: 1px solid #ebebeb;
        color: #262a2f;
        font-size: 16px;
        padding: 10px 30px 20px;
        border-radius: 10px;
        box-shadow: 0px 8px 16px rgba(140, 160, 179, 18%);
        display: flex;
        flex-direction: column;
        // justify-content: center;
        background: #fff;
        transition: 0.2s;

        // &:hover {
        //   transition: 0.2s;
        //   background: rgba(221, 221, 221, 0.2);
        //   cursor: pointer;
        // }
        .delete {
          position: absolute;
          top: 0px;
          right: 10px;

          font-size: 12px;
          color: #ccc;
          line-height: 40px;
          cursor: pointer;
          .iconfont {
            font-size: 16px;
            font-weight: 700 !important;
            cursor: pointer;
            transform: rotate(0deg);
            transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            &:hover {
              color: rgb(47, 106, 233);
              transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
              transform: rotate(90deg);
            }
          }
        }
        .row {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          line-height: 30px;
          border-bottom: 1px solid #f1f1f1;
          .ant-input {
            width: 100%;
            border: 1px solid #fff;
            &:hover {
              border: 1px solid #40a9ff;
            }
          }

          .unit {
            min-width: 80px;
          }

          .name {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            justify-content: flex-start;
            color: #50baf3;
            font-weight: 600;
            white-space: nowrap;
            font-size: 14px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            .anticon {
              margin-right: 4px;
            }
          }
          .unit {
            .ant-select-selection {
              //   background-color: #f8f8f8 !important;
              border: 1px solid #fff !important;
            }
          }
          .type {
            width: 100%;
            .ant-select-selection {
              //   background-color: #f8f8f8 !important;
              //   border: 1px solid #f8f8f8 !important;
            }
          }
          //   input{
          //       border: none !important;
          //       &:hover{
          //           border: 1px solid #ccc !important;
          //       }
          //   }
        }
      }
    }
  }
  .ant-tabs-nav .ant-tabs-tab {
    font-weight: 600;
    font-size: 16px;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: #50baf3;
    border-bottom: 2px solid #50baf3;
    &:hover {
      color: #50baf3 !important;
    }
    &:focus {
      color: #50baf3 !important;
    }
  }
  .task {
    .baseInfo {
      display: flex;
      padding: 20px 0;
      flex-direction: row;
      flex-wrap: wrap;

      .title {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        border-radius: 3px;
        height: 40px;
        padding: 0 16px;
        color: #999;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        span {
          color: #999;
        }
      }
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    .btn_box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .ant-pagination {
        color: #50baf3;
      }
      > div {
        margin: 10px 5px;
      }
      .Preview {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;

        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;

        border: 1px solid #50baf3;
        background: #fff;
        color: #50baf3;
        transition: color 0.5s;
        .text {
          font-size: 16px;
          font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
            BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans,
            Droid Sans, Helvetica Neue, sans-serif;
          font-weight: 600;
          line-height: 1;
          z-index: 4;
        }
        &:hover {
          color: #fff;
          &::after {
            height: 100%;
          }
        }
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 0;
          bottom: 0;
          left: 0;
          background: #50baf3;
          transition: height 0.5s;
          z-index: 0;
        }
      }
      .next {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
      .previous {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 3px;
        height: 48px;
        text-decoration: none;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        min-width: 140px;
        padding: 0 16px;
        font-family: Titillium Web, Ubuntu, Roboto, -apple-system,
          BlinkMacSystemFont, Segoe UI, Oxygen, Cantarell, Fira Sans, Droid Sans,
          Helvetica Neue, sans-serif;
        font-weight: 600;
        line-height: 1;

        background-image: linear-gradient(
          270deg,
          rgba(80, 186, 243, 0.35),
          #50baf3,
          #50baf3,
          rgba(80, 186, 243, 0.35)
        );
        background-size: 200% 100%;
        color: #fff;
        cursor: pointer;
        transition: background-position 0.8s;
        &:hover {
          background-position: 100% 50%;
        }
      }
    }
  }
  .page {
  }
}
.add_accounting {
  // margin:10px auto;
  display: flex;
  justify-content: center;
  // margin: 10px 0;
}
</style>